import React from 'react'

import './SimpleSilder2.less';
import {Menu, Icon, Tooltip} from "antd";

const SubMenu = Menu.SubMenu;


export default class SimpleSilder2 extends React.Component {

  static defaultProps = {
    procurementProcessData: [
      {key: '1', title: '采购计划', status: 1},
      {
        key: '2',
        title: '委托单',
        status: 1,
        subs: [{key: 21, title: 23141234456, status: 1}, {key: 22, title: 23141234456, status: 1}]
      },
      {key: '3', title: '采购文件', status: 1},
      {key: '4', title: '采购文件确认函', status: 2},
      {key: '5', title: '采购结果', status: 3},
      {key: '6', title: '合同管理', status: 3},
      {key: '7', title: '付款记录', status: 3},
      {key: '8', title: '验收评价', status: 3},],
  }

  state = {
    procurementProcessData: this.props.procurementProcessData,
    showTopRight: false,
    current: this.props.defaultSelectKey || '1',
  }

  renderItem = ({item, hasDot, hasSub}) => {
    let itemDotBackGround, itemDotFontColor, itemFontColor;
    if (item.status === 1) {
      itemDotBackGround = "item-dot-1";
      itemDotFontColor = "item-font-color-1";
      itemFontColor = "item-font-color-3"
    } else if (item.status === 2) {
      itemDotBackGround = "item-dot-2";
      itemDotFontColor = "item-font-color-3";
      itemFontColor = "item-font-color-2"

    } else if (item.status === 3) {
      itemDotBackGround = "item-dot-3";
      itemDotFontColor = "item-font-color-3";
      itemFontColor = "item-font-color-4"

    }
    return (
      <Menu.Item
        className={"ant-menu-item"}
        key={item.key}>
        {hasDot && <div className={`item-dot ${itemDotBackGround}`}>
          <span className={`${itemDotFontColor}`}>{item.key}</span>
        </div>}
        <span className={`${hasSub ? 'item-font-color-3 sub-menu-item' : itemFontColor}`}>{item.title}</span>
      </Menu.Item>
    )
  }

  handleItemClick = (e) => {

    this.state.procurementProcessData.map(item => {
      if (!item.subs) {
        if (e.key === item.key && item.status < 3) {
          this.setState({
            current: e.key,
          });
        }
      } else {

        item.subs.map(i => {

          if (e.key == i.key && i.status < 3) {
            console.log('click ', e.key, i.key, i.status);

            this.setState({
              current: e.key,
            });
          }
        })
      }
    })

  }

  handleClick = (type) => {
    console.log('type', type);
    this.props.handleClick && this.props.handleClick(type);
  }

  onBackClick = () => {
    console.log('type', '点击返回');
    this.props.onBackClick && this.props.onBackClick();

  }


  render() {
    const showTopRight = this.state.showTopRight;
    const {procurementProcessData} = this.state;
    return (
      <div className={'simple-silder2-container'}>
        <div className={'silder1-title flex-box'}>
          <div>
            <Icon
              onClick={this.onBackClick}
              className="title-icon" type="left" theme="outlined"/>
          </div>
          <div className="flex-box silder1-title-right">
            <Tooltip placement="bottom" title={"点击查看当前用户全业务流程图"}>
              <div
                className="title-top-text-container" onClick={() => this.handleClick(1)}>单
              </div>
            </Tooltip>

            <Tooltip placement="bottom" title={"点击查看全用户全业务流程图"}>
              <div
                className="title-top-text-container" onClick={() => this.handleClick(2)}>全
              </div>
            </Tooltip>
          </div>
        </div>
        <Menu
          onClick={this.handleItemClick}
          selectedKeys={[this.state.current]}
          openKeys={['2']}
          mode="inline"
        >
          {procurementProcessData.map((item) => {
            if (item.subs) {
              return (
                <SubMenu
                  key={item.key}
                  title={
                    this.renderItem({item, hasDot: true})
                  }>
                  {
                    item.subs.map(i => {
                      return (this.renderItem({item: i, hasSub: true}))
                    })
                  }
                </SubMenu>
              )
            } else {
              return (
                this.renderItem({item, hasDot: true})
              )
            }
          })
          }
        </Menu>
      </div>
    )
  }
}




